window.onload = function () {
  const cell = {
    props: {
      type: {
        type: String,
        default: 'textCell'
      },
      id: Number, name: String
    }
  };

  const textCell = Object.assign({}, cell, {
    template: '<span>{{name}}</span>'
  });

  const buttonCell = Object.assign({}, cell, {
    template: '<button>{{name}}</button>'
  });

  const textEditorCell = Object.assign({}, cell, {
    template: '<input type="text" v-model="name">'
  });

  Vue.component("row", {
    template: `
      <div class='row'>
        <component v-for='c in cells' :is='c.type' v-bind='c'
          @click.native='clickCell(c.type)'></component>
      </div>`,
    props: ['cells'],
    components: {
      textCell, buttonCell, textEditorCell
    },
    methods: {
      clickCell : function(data){
        console.log("clickComponent:" + data);
        this.$emit("click-cell", data);
      }
    }
  });

  new Vue({
    el: "#app",
    data: {
      cells: [
        { id: 1, name: 'Cell1', type: 'textCell' },
        { id: 2, name: 'Cell2', type: 'buttonCell' },
        { id: 3, name: 'Cell3', type: 'textEditorCell' }
      ]
    },
    methods: {
      clickCell : function(data){
        console.log("clickCell:" + data);
      },
      clickCell2 : function(data){
        console.log("clickCell2:" + data);
      }
    }
  });
};